<template>
  <div class="dialogBox">
    <el-dialog
      v-model="props.dialogVisible"
      :title="title"
      width="600px"
      :before-close="closeDialog"
    >
      <el-form ref="ruleFormRef" :model="form1" label-width="80px" size="default">
        <div class="form-input-box2">
          <el-form-item label="编码/名称" prop="file1">
            <el-input v-model="form1.code" placeholder="Please input" />
          </el-form-item>
          <el-form-item label="站点类型">
            <el-select v-model="form1.type" placeholder="placeholder" multiple @change="initData">
              <el-option label="雨量站" value="PP"></el-option>
              <el-option label="水文站" value="ZQ"></el-option>
              <el-option label="水位站" value="ZA"></el-option>
              <el-option label="水库站" value="value2"></el-option>
            </el-select>
          </el-form-item>
        </div>
      </el-form>
      <div class="section-box">
        <el-table
          border
          :data="state.upNodeArr"
          height="100%"
          style="width: 100%"
          size="small"
          @current-change="handleCurrentChange"
          highlight-current-row
        >
          <el-table-column type="index" width="50" />
          <el-table-column prop="stcd" label="上游编码" show-overflow-tooltip />
          <el-table-column prop="stnm" label="上游编码名称" show-overflow-tooltip />
          <el-table-column label="操作">
            <template #default="scope">
              <el-button link type="primary" size="small" @click="locationBtn(scope.row.inblkcd)"
                >定位</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="page">
          <pagi-nation
            :pageSize="page.pageSize"
            :pageTotal="page.total"
            @pageFunc="pageFunc"
            class="page"
          >
          </pagi-nation>
        </div>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="registerBtn"> 确定 </el-button>
          <el-button @click="closeDialog()">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { getSiteList } from '@/services/modules/model-config'
import pagiNation from '@/components/app-pagination/pagination.vue'

const page = reactive({
  pageNum: 1, //当前页
  pageSize: 10, //每页条目数
  total: 1 // 记录总数
})
const props = defineProps({
  dialogVisible: {
    type: Boolean,
    default: false
  }
})
const title = ref('站点')
const siteItem = reactive({})

const form1 = reactive({
  code: '',
  type: '' //'PP,ZQ,ZZ'
})
const state = reactive({
  baseInfo: {},
  nodeInfo: {},
  downNodeArr: [],
  upNodeArr: []
})

const ruleFormRef = ref(null)
const handleCurrentChange = (val) => {
  siteItem.value = val
}
const emit = defineEmits(['closeDialog'], ['handleSelect'])

const closeDialog = () => {
  emit('closeDialog', false)
}
const registerBtn = () => {
  ruleFormRef.value.validate(async (valid) => {
    if (valid) {
      emit('handleSelect', siteItem.value)
      closeDialog()
    } else {
      return
    }
  })
}
const pageFunc = (data) => {
  page.pageSize = data.pageSize
  page.pageNum = data.pageNum
  initData() // 触发获取数据函数
}
function initData() {
  return new Promise((resolve, reject) => {
    getSiteList({
      pageNum: page.pageNum,
      pageSize: page.pageSize,
      sttps: form1.type.toString(),
      key: form1.code
    }).then((res) => {
      if (res.code === 200) {
        state.upNodeArr = res.data.list
        page.total = res.data.totalRow
      }
    })
  })
}
onMounted(async () => {
  await initData()
})
</script>

<style lang="less" scoped>
.dialogBox {
  .form-input-box2 {
    display: flex;
    :deep(.el-form-item--default .el-form-item__label) {
      font-size: 16px;
    }
    :deep(.el-form-item) {
      width: 100%;
    }
    .set-other-btn {
      border: solid 1px rgb(21, 13, 237);
      background-color: rgb(21, 13, 237);
    }
  }
  .desc {
    font-size: 16px;
    line-height: 26px;
    > :nth-child(2),
    > :nth-child(3) {
      text-indent: 2em;
    }
    h4 {
      text-align: center;
      font-size: 18px;
    }
  }
  :deep(.current-row) {
    background-color: #a0bee0bd !important;
    .el-table__cell {
      background-color: transparent;
    }
  }
}
</style>
